@use "design-system";

.shield-entry-modal {
  .shield-entry-modal__title {
    line-height: 1em;
    font-size: 2.25rem;

    @include design-system.screen-sm-max {
      font-size: 2rem;
    }
  }

  .shield-entry-modal__content {
    .shield-entry-modal__dialog {
      background-color: var(--color-accent03-dark);
      max-width: 400px;
    }
  }

  @include design-system.screen-sm-max {
    .shield-entry-modal__content {
      padding: 0;
      height: 100%;
      width: 100%;

      .shield-entry-modal__dialog {
        height: 100%;
        width: 100%;
        max-width: unset;
        border-radius: 0;
      }

      .shield-entry-modal__footer {
        margin-top: auto;
      }
    }
  }

  &-shield-illustration {
    &__container {
      height: 252px;
      width: 346px;

      @include design-system.screen-sm-max {
        height: 234px;
        width: 322px;
      }
    }

    &__canvas {
      height: 100%;
      width: 100%;
    }
  }
}
